<template>
	<view class="main-box">

    <!-- 外卖组件 -->
    <view id="take-away-box" v-if="isShow">
      <!-- 定位 -->
      <view id="take-away-head">
        <span id="go-back" @tap="closeWin">×</span>
        <span class="iconfont">&#xe61b;粤华苑</span>
        <span class="iconfont head-icon">&#xe6bd; &#xe69a;</span>
      </view>
      <!-- 搜索框 -->
      <view id="serch-box"  class="iconfont">
          &#xe67c;<input type="text" placeholder="请输入想要的名称" style="display:inline-block">
          <input type="button" value="搜索" style="display:inline-block" id="serch-btn">
      </view>
      <!-- 店铺列表 -->
      <view id="store-item-box">
        <ul>
          <li v-for="(item,index) in storeList" :key="index" class="store-box">
            <image class="storeImg" :src="item.store"></image>
            <span class="store-name">{{item.storeName}}</span>
            <span class="score">{{item.score}}</span>
          </li>
        </ul>
      </view>

    </view>

		<!-- 轮播图(容器) -->
		<view class="carousel">
			<!-- 轮播 -->
			<view class="carousel-box">
				<!-- 图片 -->
				<view class="img-box">
					<image v-for="(item,index) in imgsUrl" :key="index" 
					:src="item.img" v-show="imgIndex == index">  <!-- v-show="imgIndex == index" -->
				</view>
				<!-- 小圆点 -->
				<view class="circle">
					<a v-for="(v,i) in imgsUrl" :key="i" 
					:class="imgIndex==i ? 'active' : 'circleA'"  @tap="gotoPicture(i)"></a> 
				</view> 
			</view>
		</view>


		<!-- 导航 -->
		<view class="nav">

			<ul class="nav-bar">
				<li @tap="show()" :class="isShow ? 'border-active' : ''">外卖</li>
				<li @click="itemIsShow = false,cleanIsShow = false,babyIsShow = true">保姆</li>
				<li @click="itemIsShow = false,cleanIsShow = true,babyIsShow = false">保洁</li>
				<li @click="itemIsShow = true,cleanIsShow = false,babyIsShow = false">电商</li>
			</ul>
			
		</view>
		
		<!-- 商品 -->
		<view class="item-box" v-if="itemIsShow">
			
			<view class="items" v-for="(item,index) in itemList" :key="index">
				<image :src="item.goods">

				</image>
				<p class="item-name">{{item.nameItem}}</p>
				<p class="price">¥{{item.priceItem}}</p>
				<p class="item-status">已售{{item.restItem}}</p>

			</view>
			
		</view>
		
		<!-- 保洁 -->
    <view id="clean-box" v-if="cleanIsShow" >
      称呼：<input type="text" >
      联系电话：<input type="text">
      保洁地址<input type="text">
      保洁上门时间：<input type="text">
      <input type="button" value="提交保修" id="clean-btn">
    </view>
		

    <!-- 保姆 -->
    <view id="babysit-box" v-if="babyIsShow">
      <view class="items" v-for="(item,index) in babysitList" :key="index">
				<image :src="item.goods">

				</image>
				<p class="item-name">{{item.nameItem}}</p>
				<p class="price">¥{{item.priceItem}}</p>
				<p class="item-status">已售{{item.restItem}}</p>

			</view>
    </view>

	</view>
</template>

<style lang="scss" scoped>

// 外卖组件样式
#take-away-box{
  height: 100%;
  width: 80%;
  // border: 1px solid black;
  position: absolute;
  right: 0;
  z-index: 100;
  background-color: #fff;
}
#take-away-head{
  height: 40px;
  font-size: 20px;
  color: #fff;
  background-color:#0091fe;
  line-height: 40px;
  #go-back{
    margin-right: 10px;
  }
}
.head-icon{
  float: right;
}
// 搜索栏
#serch-box{
  margin: 10px 0;
  border: 1px solid #0091fe;
  border-radius: 5px;
}
#serch-btn{
  width: 40px;
  float: right;
  background-color: #0091fe;
  border-radius: 5px;
  text-align: center;
  color: #fff;
}
// 店家列表
#store-item-box{
  ul{
    padding: 0 0 0 10px;
  }
}
.store-box{
  margin: 20px 0;
  height: 80px;
  .store-name{
    float: left;
    font-size: 18px;
  }
  .score{
    font-size: 14px;
    color: orangered;
  }
}
.storeImg{
  float: left;
  // display: inline-block;
  width: 80px;
  height: 80px;
}

ul {
  list-style: none;
}
.carousel {
  //容器
  width: 100vw;
  height: 200px;
}
.carousel-box {
  //轮播
  position: relative;
}
.img-box {
  //图片容器
  height: 200px;
  position: absolute;
  //overflow: hidden; //有v-show解决了
}
.carousel image {
  //图片
  height: 200px;
  width: 100vw;
}
.circle {
  //小圆点盒子
  position: absolute;
  top: 180px;
  left: 30vw;
}
.circleA {
  //小圆点  .carousel a
  // float: left;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  border: 1px gray solid;
  display: inline-block;
  margin: 0 10px;
  // position: absolute;
}
.active {
  //变色小圆点
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px gray solid;
  display: inline-block;
  margin: 0 10px;
  background-color: gray;
}

// nav-导航(商品)
.nav {
  height: 70px;
  border-bottom: rgba(170, 169, 169, 0.6) 1px solid;
}
.nav-bar {
  margin: 0;
  padding: 0;
  li {
    float: left;
    width: 25%;
    height: 70px;
    background-color: rgba(240, 240, 240, 0.356);
    text-align: center;
    line-height: 70px;
  }
}
// 选中变色
.border-active{
  background-color: rgb(201, 196, 196);
}
// 商品item
.items {
  width: 150px;
  height: 200px;
  //border: gray 1px solid;  //测试用
  float: left;
  margin: 15px 18px;
  image {
    width: 140px;
    height: 120px;
    margin: 0 auto;
    margin-top: 10px;
  }
  .item-name {
    margin-top: 2px;
    text-align: center;
    color: rgb(86, 141, 173);
    font-size: 16px;
    font-weight: bold;
  }
}
.price {
  font-size: 15px;
  text-align: end;
  color: rgb(218, 129, 150);
}
.item-status {
  font-size: 14px;
  text-align: end;
  color: gray;
}


// 保洁组件
#clean-btn{
  color: #fff;
  border-radius: 5px;
  background-color: rgb(86, 141, 173);
  width: 70px;
}

</style>

<script>
import "@../../static/icon/life_icon/take_away/iconfont.css";

export default {
  data() {
    return {
      
      storeList:[
        {store:"../../static/life_imgList/store_list/01.jpg",storeName:"上海馄饨",score:"4.7分"},
        {store:"../../static/life_imgList/store_list/02.jpg",storeName:"阿龙烧烤",score:"4.4分"},
        {store:"../../static/life_imgList/store_list/03.jpg",storeName:"粤华早茶",score:"4.8分"},
        {store:"../../static/life_imgList/store_list/04.jpg",storeName:"桂林米粉",score:"4.1分"},
      ],
      // 轮播图
      imgsUrl: [
        {img:"../../static/life_imgList/01.jpg"},
        {img:"../../static/life_imgList/02.jpg"},
        {img:"../../static/life_imgList/03.jpg"},
        {img:"../../static/life_imgList/04.jpg"},
      ],
      imgIndex: 0,
      // 电商商品
      itemList: [
        {goods:"../../static/life_imgList/item_list/02.jpg",priceItem:325,restItem:5,nameItem:'洗衣机'},
        {goods:"../../static/life_imgList/item_list/03.jpg",priceItem:564,restItem:63,nameItem:'相机'},
        {goods:"../../static/life_imgList/item_list/04.jpg",priceItem:724,restItem:795,nameItem:'单反'},
        {goods:"../../static/life_imgList/item_list/05.jpg",priceItem:652,restItem:1731,nameItem:'酱油'},
        {goods:"../../static/life_imgList/item_list/06.jpg",priceItem:841,restItem:164,nameItem:'手串'},
        {goods:"../../static/life_imgList/item_list/07.jpg",priceItem:564,restItem:2,nameItem:'红酒'},
        {goods:"../../static/life_imgList/item_list/08.jpg",priceItem:1596,restItem:6,nameItem:'香水'},
        {goods:"../../static/life_imgList/item_list/01.png",priceItem:1200,restItem:52,nameItem:'默认'},
      ],
      // 保姆列表
      babysitList:[
        {goods:"../../static/life_imgList/babysit_list/02.jpg",priceItem:325,restItem:5,nameItem:'阿姨2'},
        {goods:"../../static/life_imgList/babysit_list/03.jpg",priceItem:564,restItem:63,nameItem:'阿姨3'},
        {goods:"../../static/life_imgList/babysit_list/04.jpg",priceItem:724,restItem:795,nameItem:'阿姨4'},
        {goods:"../../static/life_imgList/babysit_list/05.jpg",priceItem:652,restItem:1731,nameItem:'阿姨5'},
        {goods:"../../static/life_imgList/babysit_list/06.jpg",priceItem:841,restItem:164,nameItem:'阿姨6'},
        {goods:"../../static/life_imgList/babysit_list/07.jpg",priceItem:564,restItem:2,nameItem:'阿姨7'},
        {goods:"../../static/life_imgList/babysit_list/08.jpg",priceItem:1596,restItem:6,nameItem:'阿姨8'},
        {goods:"../../static/life_imgList/babysit_list/01.jpg",priceItem:1200,restItem:52,nameItem:'阿姨1'},
      ],
      isShow:false,  //控制外卖组件的显示

      itemIsShow:true,  //控制商品的显示
      cleanIsShow:false,  //控制保洁的显示
      babyIsShow:false, //控制保姆的显示
    };
  },
  methods: {
    // 轮播
    timeGo: function () {
      setInterval(() => {
        this.imgIndex++;
        if (this.imgIndex == this.imgsUrl.length) {
          this.imgIndex = 0;
        }
      }, 2000);
      
    },
    gotoPicture(i) {        //小圆点跳转
		this.imgIndex = i;
    },
    // 显示外卖组件
    show(){
      this.isShow = true;
    },
    // 关闭外卖组件
    closeWin(){
      this.isShow = false;
    }
  },
  mounted() {
    this.timeGo();
  },
};
</script>